<!DOCTYPE html>
<html>
    <head>
        <title>$app.topic 权限管理</title>
        #parse("/inc/meta.htm")
    </head>
    <body id="inner_page_start">
        <div class="modal fade" id="ex-back-big" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="/roles/roleData" type="post">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title h4" id="myExtraLargeModalLabel">菜单信息</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <input type="hidden" name="id" id="menu-id">
                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <label for="menu-name" class="col-form-label col-sm-2">菜单名</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="menu-name" name="name"/></div>
                            </div>
                            <div class="form-group  row">
                                <div class="col-sm-2"></div>
                                <label for="menu-uri" class="col-form-label col-sm-2">访问地址</label>
                                <div class="col-sm-6"><input type="text" class="form-control" id="menu-uri" name="uri"/></div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <label for="menu-pid" class="col-form-label col-sm-2">上级菜单</label>
                                <div class="col-sm-6"> <select type="text" class="form-control" id="menu-pid" name="pid">
                                    <option value="0">一级菜单</option>
                                    <option value="-1">操作权限</option>
                                    #foreach($prole in $respData.get("0").get("child") )
                                    <option value="$prole.id">$prole.name</option>
                                    #end
                                </select></div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <label for="menu-role" class="col-form-label col-sm-2">授权角色</label>
                                <div class="col-sm-6"><input readonly="readonly" type="text" class="form-control" id="menu-role" name="role"/></div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <label for="menu-img" class="col-form-label col-sm-2">图标</label><div class="col-sm-6">
                                <input type="text" class="form-control" id="menu-img" name="img"/></div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <label for="menu-state" class="col-form-label col-sm-2">状态</label><div class="col-sm-6">
                                <select type="text" class="form-control" id="menu-state" name="state">
                                    <option value="1">禁用</option>
                                    <option value="0">启用</option>
                                </select></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="sub-button-role">新建</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        #parse("/inc/header.htm")
        <div id="wrapper">
            #parse("/inc/menu.htm")
            <div id="content-wrapper">
                <div class="container-fluid">
                    <!-- 面包屑-->
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            系统设置
                        </li>
                        <li class="breadcrumb-item active">权限组</li>
                    </ol>
                </div>
                <!-- /.container-fluid -->
                <div class="container-fluid card mb-3">
                    <div class="card-body">
                        <form id="list_form" action="/roles/list" >

                            <div class="form-inline">
                                <div class="form-group mx-sm-3">
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ex-back-big" >
                                        新建菜单</button>
                                </div>
                            </div>
                            <br/>

                            <div class="row">
                                <div class="col-sm-12 table-outer-box">
                                    <table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
                                        <thead>
                                            <tr role="row">
                                                <th>父菜单</th>
                                                <th>菜单名</th>
                                                <th>路径</th>
                                                <th>授权角色</th>
                                                <th>图标</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            #foreach( $outer in $respData )
                                            #if($outer.id == 0 || $outer.id == -1)
                                            #foreach( $parent in $outer.get("child") )
                                            <tr #if($change == $parent.id) style="background: #0bb20c" #end>
                                                <td>$!outer.pname </td>
                                                <td>$!parent.name</td>
                                                <td>$!parent.uri</td>
                                                <td>$!parent.role</td>
                                                <td>$!parent.img</td>
                                                <td>
                                                    #if($!parent.state == 0)
                                                    启用
                                                    #else
                                                    禁用
                                                    #end
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-sm"  data-toggle="modal" data-target="#ex-back-big"
                                                            data-mid="$!parent.id">编辑</button>
                                                </td>
                                            </tr>
                                            #foreach( $son in $parent.get("child") )
                                            <tr  #if($change == $son.id) style="background: #0bb20c" #end>
                                                <td>$!parent.name</td>
                                                <td>$!son.name</td>
                                                <td>$!son.uri</td>
                                                <td>$!son.role</td>
                                                <td>$!son.img</td>
                                                <td>
                                                    #if($!son.state == 0)
                                                    启用
                                                    #else
                                                    禁用
                                                    #end
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-sm"  data-toggle="modal" data-target="#ex-back-big"
                                                            data-mid="$!son.id">编辑</button>
                                                </td>
                                            </tr>
                                            #end
                                            #end
                                            #end
                                            #end
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                #parse("/inc/copyright.htm")
            </div>
            <!-- /.content-wrapper -->
        </div>
        #parse("/inc/footer.htm")
        <script>
            $('#ex-back-big').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var mid = button.data('mid')
                if(mid){
                    $("#menu-id").val(mid)
                    $("#sub-button-role").text("更新")
                    role(mid)
                }else{
                    $("#menu-name").val("")
                    $("#menu-pid").val("")
                    $("#menu-role").val("")
                    $("#menu-uri").val("")
                    $("#menu-img").val("")
                    $("#menu-id").val("")
                    $("#sub-button-role").text("新建")
                }
            })

            function role(mid){
                if(!mid)
                    mid = ""
                var good = false
                $.ajax({
                    url: "/menu/menuInfo",
                    data: { id:mid },
                    type: "POST",
                    dataType: "json",
                    async: false,
                    success: function(data) {
                        if(data.state == "000"){
                            good = true
                            data.data
                            if(data.data.name)
                                $("#menu-name").val(data.data.name)
                            $("#menu-role").val(data.data.role)
                            $("#menu-pid").val(data.data.pid)
                            $("#menu-state").val(data.data.state)
                            if(data.data.uri)
                                $("#menu-uri").val(data.data.uri)
                            if(data.data.img)
                                $("#menu-img").val(data.data.img)
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("网络异常，请稍后重试"+textStatus)
                        setTimeout(function(){
                            $("#ex-back-big").modal("hide")
                        },500);
                    }
                });

                return good
            }
        </script>
    </body>
</html>